<template>
  <el-menu :router="true" :default-active="router.currentRoute.value.fullPath" class="el-menu-vertical-demo"  :collapse="isBig"
    @open="handleOpen" @close="handleClose" :unique-opened="true" :collapse-transition="true">
    
    <!-- 控制台 -->
    <el-sub-menu index="1">
      <template #title>
        <el-icon>
          <Help />
        </el-icon>
        <span>后台面板</span>
      </template>
      <el-menu-item index="/home/homefilled" @click="tags('/home/homefilled', '控制台')">
        <template #title>
          <el-icon>
            <HomeFilled />
          </el-icon>
          <span>控制台</span>
        </template>
      </el-menu-item>
    </el-sub-menu>

    <!-- 商品分类 -->
    <el-sub-menu index="2">
      <!-- 子导航名称 -->
      <template #title>
        <el-icon>
          <Help />
        </el-icon>
        <span>商品管理</span>
      </template>
      <el-menu-item @click="tags(`/home/${item.path}`, item.meta.name)" :index="'/home/' + item.path"
        v-for="(item, index) in commodity" :key="item.name">
        <template #title>
          <el-icon>
            <HomeFilled />
          </el-icon>
          <span>{{ item.meta.name }}</span>
        </template>
      </el-menu-item>
    </el-sub-menu>
    <!-- 商品支付 -->
    <el-sub-menu index="3">
      <!-- 子导航名称 -->
      <template #title>
        <el-icon>
          <Help />
        </el-icon>
        <span>商品支付</span>
      </template>
      <el-menu-item @click="tags(`/home/${item.path}`, item.meta.name)" :index="'/home/' + item.path"
        v-for="(item, index) in payhome" :key="item.name">
        <template #title>
          <el-icon>
            <HomeFilled />
          </el-icon>
          <span>{{ item.meta.name }}</span>
        </template>
      </el-menu-item>
    </el-sub-menu>

        <!-- 优惠卷模块 -->
        <el-sub-menu index="4">
      <template #title>
        <el-icon><MostlyCloudy /></el-icon>
        <span>优惠卷模块</span>
      </template>
      <el-menu-item @click="tags(`/home/${item.path}`, item.meta.name)" :index="'/home/' + item.path"
        v-for="(item, index) in preferentialCard" :key="item.name">
        <template #title>
          <el-icon>
            <HomeFilled />
          </el-icon>
          <span>{{ item.meta.name }}</span>
        </template>
      
      </el-menu-item>
    </el-sub-menu>
      <!-- 用户管理 -->
      <el-sub-menu index="5">
      <template #title>
        <el-icon><MostlyCloudy /></el-icon>
        <span>用户管理</span>
      </template>
      <el-menu-item @click="tags(`/home/${item.path}`, item.meta.name)" :index="'/home/' + item.path"
        v-for="(item, index) in UserManagementHome" :key="item.name">
        <template #title>
          <el-icon>
            <HomeFilled />
          </el-icon>
          <span>{{ item.meta.name }}</span>
        </template>
      
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>
<script>
import { defineComponent,watch, getCurrentInstance , ref, toRaw } from 'vue'
import jsCookie from 'js-cookie';
import { commodity,payhome,preferentialCard,UserManagementHome} from "@/router/navBar.js"//子路由信息
import {
  useRouter
} from "vue-router";
export default defineComponent({
  props: ['isCollapse',"isBig"],
  setup(props, context) {
    console.log(payhome);
    const router = useRouter()
    let tagsArr = []
    // 导航到当前路由
    let tagrou = jsCookie.get('tagsRouter')
    let tag = jsCookie.get('tags')
    if (!tag) {
      jsCookie.set('tags', JSON.stringify([{ path: '/home/homefilled', name: '控制台' }]))
    let tag = jsCookie.get('tags')

      // 传数据给父组件
      const tagss = JSON.parse(tag)
      tagsArr.push(...tagss)

      context.emit('openpage', tagss);
    } else {
      // 传数据给父组件
      const tagss = JSON.parse(tag)
      tagsArr.push(...tagss)
      context.emit('openpage', tagss);
    }
    // 存储标签
    const tags = (path, name) => {
      let tags = jsCookie.get('tags')
      let flag = JSON.parse(tags).some(item => item.path == path)
      tagsArr=JSON.parse(tags)

      if (!flag) {
        tagsArr.push({ path: path, name: name })
        console.log(tagsArr);
        jsCookie.set('tags', JSON.stringify([ ...tagsArr]))
      let tags = jsCookie.get('tags')
      jsCookie.set('tagsRouter',path)

        context.emit('openpage', JSON.parse(tags));
        return
      }
      jsCookie.set('tagsRouter',path)
      context.emit('openpage', JSON.parse(tags));
    }
    const handleOpen = (key, keyPath) => {
    }
    const handleClose = (key, keyPath) => {
      console.log(key, keyPath)
    }
    return {
      handleOpen, handleClose, router, commodity,
      tags, tagsArr,tagrou,payhome,preferentialCard,UserManagementHome
    }
  },
})


</script>